
<template>
<div class="bg-wrapper">
  <header class="bg-header">
    <h3>联通集团VoLTE监控预警</h3>
    <div class="left-text"></div>
    <div class="right-text">数据日期：<span>2019-07-22</span></div>
  </header>
  <div class="bg-body">
    <el-row>
      <el-col :span="6">
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            <ve-line :data="chartData" :extend="lineOption" width="100%" height="100%"></ve-line>
          </div>
        </div>
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            <ve-histogram :data="chartData" :extend="bar3Option" width="100%" height="100%"></ve-histogram>
          </div>
        </div>
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            <ve-histogram :data="chartData2" :extend="bar1Option" width="100%" height="100%"></ve-histogram>
          </div>
        </div>
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <div class="bg-panel-wrapper">
              <div class="bg-panel">
                
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="bg-panel-wrapper" style="height:500px">
              <div class="bg-panel">
                <timeline-map ref="chinaMap" :data-list="mapDataList" :options="mapOptions" :size="{width:'100%',height:'500px'}" ></timeline-map>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            <ve-line :data="chartData" :extend="lineOption" width="100%" height="100%"></ve-line>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="bg-panel-wrapper">
              <div class="bg-panel">
                <ve-pie :data="chartData2" :extend="pieOption" width="100%" height="100%"></ve-pie>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="bg-panel-wrapper">
              <div class="bg-panel">
                <ve-ring :data="chartData2" :extend="ringOption" width="100%" height="100%"></ve-ring>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            <ve-pie :data="chartData" :extend="pieOption" width="100%" height="100%"></ve-pie>
          </div>
        </div>
        <div class="bg-panel-wrapper">
          <div class="bg-panel">
            <ve-ring :data="chartData" :extend="ringOption" width="100%" height="100%"></ve-ring>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</div>

</template>

<script>
import echarts from 'echarts/lib/echarts'
import chartConfig from './ChartConfig'
import TimelineMap from './components/TimelineMap'

export default {
  name: 'BigView1',
  data() {
    
    return {
      lineOption: chartConfig.getLineOption(),
      bar3Option: chartConfig.getBarOption(3),
      bar1Option: chartConfig.getBarOption(1),
      pieOption: chartConfig.getPieOption(null,'60%'),
      ringOption: chartConfig.getRingOption(null,['40%','60%']),

      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
          { '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      chartData2: {
        columns: ['日期', '访问用户'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      mapDataList: [
          {prov:"北京市",count1:10,count2:500,count3:264}
        ,{prov:"天津市",count1:20,count2:490,count3:188}
        ,{prov:"河北省",count1:30,count2:480,count3:418}
        ,{prov:"山西省",count1:40,count2:470,count3:67}
        ,{prov:"内蒙古自治区",count1:50,count2:460,count3:160}
        ,{prov:"辽宁省",count1:60,count2:450,count3:379}
        ,{prov:"吉林省",count1:70,count2:440,count3:200}
        ,{prov:"黑龙江省",count1:80,count2:430,count3:436}
        ,{prov:"上海市",count1:90,count2:420,count3:22}
        ,{prov:"江苏省",count1:100,count2:410,count3:440}
        ,{prov:"浙江省",count1:110,count2:400,count3:252}
        ,{prov:"安徽省",count1:120,count2:390,count3:485}
        ,{prov:"福建省",count1:130,count2:380,count3:183}
        ,{prov:"江西省",count1:140,count2:370,count3:457}
        ,{prov:"山东省",count1:150,count2:360,count3:126}
        ,{prov:"河南省",count1:160,count2:350,count3:148}
        ,{prov:"湖北省",count1:170,count2:340,count3:57}
        ,{prov:"湖南省",count1:180,count2:330,count3:470}
        ,{prov:"广东省",count1:190,count2:320,count3:94}
        ,{prov:"广西壮族自治区",count1:200,count2:310,count3:186}
        ,{prov:"海南省",count1:210,count2:300,count3:16}
        ,{prov:"重庆市",count1:220,count2:290,count3:94}
        ,{prov:"四川省",count1:230,count2:280,count3:467}
        ,{prov:"贵州省",count1:240,count2:270,count3:125}
        ,{prov:"云南省",count1:250,count2:260,count3:62}
        ,{prov:"西藏自治区",count1:260,count2:250,count3:217}
        ,{prov:"陕西省",count1:270,count2:240,count3:293}
        ,{prov:"甘肃省",count1:280,count2:230,count3:365}
        ,{prov:"青海省",count1:290,count2:220,count3:421}
        ,{prov:"宁夏回族自治区",count1:300,count2:210,count3:268}
        ,{prov:"新疆维吾尔自治区",count1:310,count2:200,count3:274}
        ,{prov:"台湾省",count1:320,count2:190,count3:260}
      ],
      mapOptions:[
        {name:"用户数",title:"用户数 全国分布情况",dimensions:[{name:'prov', displayName:'省份'},{name:'count1', displayName:'用户数'}]},
        {name:"注册数",title:"注册数 全国分布情况",dimensions:[{name:'prov', displayName:'省份'},{name:'count2', displayName:'注册数'}]},
        {name:"失败数",title:"失败数 全国分布情况",dimensions:[{name:'prov', displayName:'省份'},{name:'count3', displayName:'失败数'}]}
      ]
      
    }
  },
  mounted(){
    setInterval(this.refresh,5000)
  },
  beforeDestroy() {
    
  },
  components: {
    TimelineMap
  },
  methods: {
    /**
     * 模拟刷新数据
     */
    refresh(){
      this.chartData.rows.forEach(function (row) {
        row['访问用户'] = parseInt(Math.random()*5000)
        row['下单用户'] = parseInt(Math.random()*3000)
        row['下单率'] = parseFloat(Math.random()).toFixed(2)
      })
      this.chartData2.rows.forEach(function (row) {
        row['访问用户'] = parseInt(Math.random()*5000)
        row['下单用户'] = parseInt(Math.random()*3000)
        row['下单率'] = parseFloat(Math.random()).toFixed(2)
      })
      this.mapDataList.forEach(function (row) {
        row['count1'] = parseInt(Math.random()*500)
        row['count2'] = parseInt(Math.random()*500)
        row['count3'] = parseInt(Math.random()*500)
      })
      // chinaMap需要手动刷新
      this.$refs.chinaMap.redraw()
    }
  }
}
</script>

<style>
.bg-wrapper {
    background-image: url(/static/img/bgview/bg01.png);
    width: 100%;
    height: 100%;
    min-height: 635px;
    font-family: "microsoft yahei", arial, sans-serif;
    background-color: #0f1c30;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.bg-header {
    margin: 0 auto;
    width: 100%;
    height: 65px;
    max-width: 1920px;
    background: url(/static/img/bgview/header.png) center no-repeat;
    color: #5dc2fe;
}
.bg-header h3 {
    margin: 0;
    padding: 0;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.bg-header .left-text {
    float: left;
    /* margin-bottom: 5px ; */
    margin-left: 10px ;
}
.bg-header .right-text {
    float: right ;
    /* margin-bottom: 5px ; */
    margin-right: 10px ;
}
.bg-body {
    margin: 10px;
    width: 100%;
}
.bg-panel-wrapper {
    height: 250px ;
    padding-bottom: 5px;
    box-sizing: border-box;
}
.bg-panel {
    padding: 5px;
    height: 100%;
    min-height: 170px;
    background: url(/static/img/bgview/panel2.png) center no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
}
</style>
